<template>
	<view>
		<u-popup :show="popuo_show" round="20rpx" @close="onClose()" mode="bottom" bgColor="#ffffff">
			<view class="select-wrap">
				<view class="title-line">
					<text class="title">上传图片或视频</text>
					<image src="@/static/images/close.png" class="close-ioc" @click="onClose()"></image>
				</view>
				<view class="form-view">
					<view class="item" @click="onChooseImage()">
						<image src="@/static/images/image-ioc02.png" class="ioc"></image>
						<text class="text">上传图片</text>
					</view>
					<view class="item" @click="chooseVideo()">
						<image src="@/static/images/image-ioc01.png" class="ioc"></image>
						<text class="text">上传视频</text>
					</view>
				</view>

				<view class="btn-view">
					<button class="btn" @click="onClose()">取消上传</button>
				</view>
			</view>
			<i-toast ref="iToast"></i-toast>
		</u-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				popuo_show: false,
				name: "",
				count:1

			};
		},
		methods: {
			show(name,count = 1) {
				this.count = count
				this.name = name
				this.popuo_show = true
			},

			onClose() {
				this.popuo_show = false;
				this.$emit("close");
			},
			onChooseImage() {
				uni.chooseMedia({
					count: this.count, //默认9
					mediaType: ['image'],
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						const list = []
						this.loadingShow("上传中")
						for(let i=0;i<res.tempFiles.length;i++){
							const { url } = await this.uploadFile(res.tempFiles[i]['tempFilePath'])
							list.push(url)
						}
						
						this.loadingHide();
						this.$emit("select", { name: this.name, paths: list, type: "image" })
						this.popuo_show = false
					}
				});
			},
			//选择视频
			chooseVideo() {
				uni.chooseMedia({
					count: this.count,
					mediaType: ['video'],
					success: async (res) => {
						const list = []
						this.loadingShow("上传中")
						for(let i=0;i<res.tempFiles.length;i++){
							const { url } = await this.uploadFile(res.tempFiles[i]['tempFilePath'])
							list.push(url)
						}
						
						this.loadingHide();
						this.$emit("select", { name: this.name, paths: list, type: "video" })
						this.popuo_show = false

					}
				});
			}

		},

	}
</script>

<style lang="scss" scoped>
	.select-wrap {
		display: flex;
		flex-direction: column;

		.title-line {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx;
			border-bottom: 1px solid #E5E5E5;

			.title {
				font-size: 32rpx;
				color: #333333;
			}

			.close-ioc {
				position: absolute;
				right: 30rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.form-view {
		display: flex;
		background-color: #ffffff;
		padding: 30rpx 30rpx;
		margin-top: 10rpx;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			.ioc {
				width: 140rpx;
				height: 140rpx;
			}

			.text {
				font-size: 28rpx;
				color: #333333;
			}
		}


	}

	.btn-view {
		padding: 30rpx 30rpx;
	}
</style>